<template>
  <div>
    <div class="topicContentModule" v-if="topicData.length > 0">
      <div class="head-box">
        <div class="userInfo clearfix">
          <div class="avatarBox">
            <img v-if="topicData[0].real === '1'" :src="topicData[0].src || require('src/assets/imgs/use.png')" />
            <img v-else :src="require('src/assets/imgs/use.png')" />
          </div>
          <div class="left">
            <div class="topInfo">
              <div class="top-box"><span class="userName">
                  <span v-if="topicData[0].real === '1'">{{ topicData[0].nickName }}</span>
                  <span v-else>匿名用户</span>
                </span>
              </div>
              <div class="bottom-box"><i class="time">{{topicData[0].createTime}}</i></div>
            </div>
          </div>
        </div>
      </div>
      <div class="topicDetail">
        <div class="head">
          <h1>
            {{topicData[0].title}}
          </h1>
          <div class="info clearfix">
            <span class="left">
              <div class="tagName">{{topicData[0].tagName}}</div>
            </span>
            <p class="right">
              <van-icon name="chat-o" />
              <span style="margin-left: 2px; margin-right: 5px;">{{ topicData[0].commentTotal }}</span>
              <van-icon name="eye-o" />
              <span style="margin-left: 2px;">{{ topicData[0].views }}</span>
            </p>
          </div>
        </div>
        <div class="main" v-html="topicData[0].detail">
        </div>
      </div>
      <div class="commentList" v-if="checkTagType()">
        <div class="item" v-for="(item, index) in commentData" :key="index" v-show="item.status === '1'">
          <div class="head">
            <div class="avatarBox">
              <img v-if="item.real === '1'" :src="item.src || require('src/assets/imgs/use.png')" />
              <img v-else :src="require('src/assets/imgs/use.png')" />
            </div> <span class="info">
              <h2 class="clearfix">
                <div class="userName">
                  <span v-if="item.real === '1'">{{ item.nickName }}</span>
                  <span v-else>匿名用户</span>
                </div>
                <div v-show="item.userId === topicData[0].userId && item.real === '1'&& topicData[0].real === '1'" class="userTag" style="display: inline-block; margin-left: 5px">
                  <span class="master">作者</span>
                </div>
              </h2>
              <div class="time clearfix">{{ item.createTime }}</div>
            </span>
          </div>
          <div class="main" >
            <div class="commentContent" v-html="item.detail">
            </div>
            <div class="replyList" v-if="item.reply.total > 0">
              <ul class="box">
                <li v-for="(itemG, i) in item.reply.Datas" :key="i">
                  <div class="reply-top">
                    <div class="avatarBox"> <img v-if="itemG.real === '1'" :src="itemG.src || require('src/assets/imgs/use.png')" />
                      <img v-else :src="require('src/assets/imgs/use.png')" />

                    </div> <span class="userName">
                      <span v-if="itemG.real === '1'">{{ itemG.nickName }}</span>
                      <span v-else>匿名用户</span>
                    </span>

                    <div class="userTag" v-show="itemG.userId === topicData[0].userId && itemG.real === '1'&& topicData[0].real === '1'">
                      <span class="master">作者</span>
                    </div>

                    <span class="time">
                      {{ itemG.createTime }}
                    </span>
                  </div>
                  <div style="clear: both; height: 0px; line-height: 0; font-size: 0px;"></div>
                  <div class="replyContent" v-html="itemG.detail"></div>
                </li>
              </ul>
            </div>
          </div>
          <div style="display:flex;justify-content: space-between;">
            <div style="display:inline-block;font-size: 14px;color: #26a2ff;" v-if="item.reply.total>5" @click="toReply(item)"><span>查看更多</span></div>
            <div class="bottomInfo" style="display:inline-block;vertical-align: top;">
              <div class="toolbar" v-if="topicData[0].status == '2'">
                <span class="reply-btn"  @click="toAdd('3',item.id,item.userId)">
                  <span class="cms-reply" style="font-size: 11px; margin-right: 1px;"></span>
                  回复
                </span>
              </div>
            </div>
          </div>

        </div>
        <div class="commentPage page" v-if="pager.total>pager.pageSize">
          <a href="javascript:void(0);" @click="handleCurrentChange(false)" :class="[pager.pageNo == 1?'no':'selected']">上一页</a>
          <span class="count">{{pager.pageNo}}/{{pager.pageCount}}</span>
          <a href="javascript:void(0);" @click="handleCurrentChange(true)" :class="[pager.pageNo == pager.pageCount?'no':'selected']">下一页</a>
        </div>
        <div style="margin: 10px 10px 30px 10px" v-if="topicData[0].status == '2'">
          <van-button type="primary" round @click="toAdd('2',$route.params.topicId,topicData[0].userId)" block>发表评论</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
    getArticle,
    getComment,
    getReply
} from 'src/plugins/http/server/article/index';
import { msgFn } from 'src/utils';
import {
    reactive, ref, onMounted, computed
} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import store from 'src/store';

export default {
    setup() {
        const $route = useRoute();
        const $router = useRouter();
        const pager = reactive({
            'pageNo': 1,
            'pageSize': 5,
            'total': 0,
            'pageCount': 0
        });
        const searchItem = reactive({
            'commentDetail': '',
            'real': 1
        });
        const commentData = ref([]);
        const topicData = ref([]);
        const tagData = computed(() => store.state.tagData);

        const toReply = (item:commentObj) => {
            let params = {
                'name': 'commentDetail',
                'params': {
                    'commentId': item.id
                }
            };
            sessionStorage.commentData = JSON.stringify(item);
            $router.push(params);
        };
        const toAdd = (type:string, id:string,targetId:string) => {
            let params = {
                'name': 'add',
                'params': {
                    'type': type,
                    'targetId': targetId,
                    'id': id
                }
            };
            $router.push(params);
        };
        const getTopic = () => {
            let params = {
                'self': $route.query.self === '1',
                'articleId': $route.params.topicId
            };
            getArticle({
                'data': params
            })
                .then((res:any) => {
                    res.data.articleDatas.forEach((item:articleObj) => {
                        item.createTime = UtilTools.formatDateTime({
                            'date': item.createTime
                        });
                        item.modifyTime = UtilTools.formatDateTime({
                            'date': item.modifyTime
                        });
                        item.tagName = tagData.value.filter(
                            tag => tag.id === item.tagId
                        )[0]?.value;
                    });
                    topicData.value = res.data.articleDatas;
                })
                .catch(e => {
                    console.log(e);
                    // msgFn(e);
                });
        };
        const checkTagType = () => {
            if (
                topicData.value[0]['tagId'] === '33a18364a759436aaab2dedb6b2a336c' ||
        topicData.value[0]['tagId'] === 'c15add25-f6eb-43a1-ac00-05759e008415'
            ) {
                return false;
            }
            return true;
        };
        const getCommentAll = () => {
            let params = {
                'pageNo': pager.pageNo,
                'pageSize': pager.pageSize,
                'status':'1',
                'id': $route.params.topicId
            };
            getComment({
                'data': params
            })
                .then((res:any) => {
                    res.data.Datas.forEach((item:commentObj) => {
                        item.show = false;
                        item.reply.pageNo = 1;
                        item.reply.pageSize = 5;
                        item.show = false;
                        item.replyShow = false;
                        item.createTime = UtilTools.formatDateTime({
                            'date': item.createTime
                        });
                        if (item.reply.total > 0) {
                            item.reply.Datas.forEach(element => {
                                element.createTime = UtilTools.formatDateTime({
                                    'date': element.createTime
                                });
                            });
                        }
                    });
                    pager.total = res.data.total;
                    pager.pageCount = Math.ceil(res.data.total / 5);
                    commentData.value = res.data.Datas;
                })
                .catch(e => {
                    msgFn(e);
                });
        };

        const handleCurrentChange = (type:boolean) => {
            if (type) {
                if (pager.pageNo < pager.pageCount) {
                    pager.pageNo++;
                }
            } else if (pager.pageNo > 1) {
                pager.pageNo--;
            }
            getCommentAll();
        };

        onMounted(() => {
            getTopic();
            getCommentAll();
        });
        return {
            pager,
            searchItem,
            commentData,
            topicData,
            toAdd,
            toReply,
            getCommentAll,
            handleCurrentChange,
            checkTagType
        };
    }
};
</script>
<style lang='less' scoped>
@import '~@/views/article/detail/index.css';
</style>